{extend name="layout/base"}

{block name="content"}

<div class="layui-row">
    <button style="margin: 10px" class="layui-btn layui-btn-sm" id="addRole"><i class="layui-icon layui-icon-add-1"></i>添加
    </button>
</div>
<table class="layui-form" id="table" lay-filter="table"></table>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
</script>

<script type="text/html" id="name">
    <div>{{d.html}}{{d.menu_name}}</div>
</script>

<script>
    layui.use(['jquery', 'table'], function ($, table) {

        $('#addRole').click(function () {
            layer.open({
                type: 2,
                content: "{:url('menu/add')}",
                area: ['35%', '40%'],
                title: '添加菜单'
            });
        });

        var opt = {
                elem: "#table",
                url: "{:url('')}",
                cols: [[
                    {field: 'menu_id', title: 'ID'},
                    {field: 'menu_name', title: '菜单名称', templet: '#name'},
                    {field: 'role_name', title: '角色名称'},
                    {field: 'menu_sort', title: '排序', edit: 'number'},
                    {title: '操作', toolbar: '#tool'}
                ]]
            },

            tabIns = table.render(opt);

        table.on('tool(table)', function (obj) {
            var id = obj.data.menu_id;
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        type: 2,
                        content: "{:url('menu/edit')}?menu_id=" + id,
                        area: ['35%', '40%'],
                        title: '修改菜单'
                    });
                    break;
                case 'del':
                    layer.confirm('确定要删除吗', {icon: 3, title:'提示'},function (index) {
                        $.get("{:url('menu/del')}",{id:id});
                        layer.close(index);
                        tabIns.reload(opt)
                    });
                    break;
                default:
                    break;
            }

        })

        table.on('edit(table)', function(obj){
            var value = obj.value
                ,id = obj.data.menu_id;
            $.ajax({
                url: '{:url("menu/editSort")}',
                type: "POST",
                data: {
                    value: value,
                    id : id
                },
                success: function(res){
                    layer.msg(res.msg);
                }
            })
        });
    });
</script>
{/block}